Guide des Formulaires HTML

1. Structure de base

Le plus simple formulaire

          <form>
    <input type="text">
    <button>Envoyer</button>
</form>
        

          Tout formulaire commence par la balise <form> et se termine par </form>
        

Un formulaire avec label

          <form>
    <label>Votre nom :</label>
    <input type="text">
    <button>Envoyer</button>
</form>
        

          Le label décrit le champ à remplir. C'est comme une étiquette !
        

Lier un label à son input (Très important !)

          <form>
    <label for="nom">Votre nom :</label>
    <input type="text" id="nom">
    <button>Envoyer</button>
</form>
        

          L'attribut "for" du label doit correspondre à l'attribut "id" de l'input
        

2. Les champs de base

Texte simple

          <label for="prenom">Prénom :</label>
<input type="text" id="prenom" name="prenom">
        
          Pour tout texte court : prénom, nom, ville...

Email

          <label for="email">Email :</label>
<input type="email" id="email" name="email">
        
          Vérifie automatiquement si l'email est valide

Mot de passe

          <label for="mdp">Mot de passe :</label>
<input type="password" id="mdp" name="mdp">
        
          Cache automatiquement ce que l'utilisateur tape

Grand texte

          <label for="message">Message :</label>
<textarea id="message" name="message"></textarea>
        
          Pour les textes longs : messages, commentaires...

3. Les attributs importants

Champ obligatoire

          <label for="nom">Nom :</label>
<input type="text" id="nom" required>
        
          required = l'utilisateur doit remplir ce champ

Texte d'exemple

          <label for="tel">Téléphone :</label>
<input type="tel" id="tel" placeholder="06 12 34 56 78">
        
          placeholder = texte d'exemple qui disparaît quand on écrit

Valeur par défaut

          <label for="pays">Pays :</label>
<input type="text" id="pays" value="France">
        
          value = valeur déjà remplie au chargement

4. Les champs de choix

Cases à cocher

          <label>
    <input type="checkbox" name="fruits" value="pomme">
    Pomme
</label>
<label>
    <input type="checkbox" name="fruits" value="poire">
    Poire
</label>
        

          Permet de choisir plusieurs options
        

Boutons radio

          <label>
    <input type="radio" name="genre" value="homme">
    Homme
</label>
<label>
    <input type="radio" name="genre" value="femme">
    Femme
</label>
        

          Permet de choisir UNE SEULE option parmi plusieurs
        

Liste déroulante simple

          <label for="pays">Pays :</label>
<select id="pays" name="pays">
    <option value="">Choisissez...</option>
    <option value="fr">France</option>
    <option value="be">Belgique</option>
    <option value="ch">Suisse</option>
</select>
        

          Menu déroulant pour choisir une option dans une liste
        

5. Exemple de formulaire complet

Formulaire d'inscription simple

          <form action="/inscription" method="post">
    <div>
        <label for="nom">Nom :</label>
        <input type="text" id="nom" name="nom" required>
    </div>

    <div>
        <label for="email">Email :</label>
        <input type="email" id="email" name="email" required>
    </div>

    <div>
        <label for="mdp">Mot de passe :</label>
        <input type="password" id="mdp" name="mdp" required>
    </div>

    <div>
        <label>
            <input type="checkbox" name="newsletter">
            Je veux recevoir la newsletter
        </label>
    </div>

    <button type="submit">S'inscrire</button>
</form>
        

          Points importants :
          - Chaque champ a un label
- Les champs obligatoires ont required
- Le formulaire a une action et une méthode
- Les champs sont organisés dans des div
- Chaque champ a un name pour le traitement

        

6. Conseils pour débuter

À toujours faire :

- Mettre un label pour chaque champ
- Donner des noms clairs aux champs (attribut name)
- Organiser les champs dans des div
- Indiquer les champs obligatoires
- Tester le formulaire avant de le mettre en ligne

Pièges à éviter :

- Oublier de fermer les balises
- Utiliser le même id plusieurs fois
- Oublier l'attribut name
- Oublier de lier les labels aux inputs
- Mettre trop de champs obligatoires

Guide des Formulaires HTML - Pour Débutants

1. Structure de base

Le plus simple formulaire

          <form>
    <input type="text">
    <button>Envoyer</button>
</form>
        

          Tout formulaire commence par la balise <form> et se termine par </form>
        

Un formulaire avec label

          <form>
    <label>Votre nom :</label>
    <input type="text">
    <button>Envoyer</button>
</form>
        

          Le label décrit le champ à remplir. C'est comme une étiquette !
        

Lier un label à son input (Très important !)

          <form>
    <label for="nom">Votre nom :</label>
    <input type="text" id="nom">
    <button>Envoyer</button>
</form>
        

          L'attribut "for" du label doit correspondre à l'attribut "id" de l'input
        

2. Les champs de base

Texte simple

          <label for="prenom">Prénom :</label>
<input type="text" id="prenom" name="prenom">
        
          Pour tout texte court : prénom, nom, ville...

Email

          <label for="email">Email :</label>
<input type="email" id="email" name="email">
        
          Vérifie automatiquement si l'email est valide

Mot de passe

          <label for="mdp">Mot de passe :</label>
<input type="password" id="mdp" name="mdp">
        
          Cache automatiquement ce que l'utilisateur tape

Grand texte

          <label for="message">Message :</label>
<textarea id="message" name="message"></textarea>
        
          Pour les textes longs : messages, commentaires...

3. Les attributs importants

Champ obligatoire

          <label for="nom">Nom :</label>
<input type="text" id="nom" required>
        
          required = l'utilisateur doit remplir ce champ

Texte d'exemple

          <label for="tel">Téléphone :</label>
<input type="tel" id="tel" placeholder="06 12 34 56 78">
        
          placeholder = texte d'exemple qui disparaît quand on écrit

Valeur par défaut

          <label for="pays">Pays :</label>
<input type="text" id="pays" value="France">
        
          value = valeur déjà remplie au chargement

4. Les champs de choix

Cases à cocher

          <label>
    <input type="checkbox" name="fruits" value="pomme">
    Pomme
</label>
<label>
    <input type="checkbox" name="fruits" value="poire">
    Poire
</label>
        

          Permet de choisir plusieurs options
        

Boutons radio

          <label>
    <input type="radio" name="genre" value="homme">
    Homme
</label>
<label>
    <input type="radio" name="genre" value="femme">
    Femme
</label>
        

          Permet de choisir UNE SEULE option parmi plusieurs
        

Liste déroulante simple

          <label for="pays">Pays :</label>
<select id="pays" name="pays">
    <option value="">Choisissez...</option>
    <option value="fr">France</option>
    <option value="be">Belgique</option>
    <option value="ch">Suisse</option>
</select>
        

          Menu déroulant pour choisir une option dans une liste
        

5. Exemple de formulaire complet

Formulaire d'inscription simple

          <form action="/inscription" method="post">
    <div>
        <label for="nom">Nom :</label>
        <input type="text" id="nom" name="nom" required>
    </div>

    <div>
        <label for="email">Email :</label>
        <input type="email" id="email" name="email" required>
    </div>

    <div>
        <label for="mdp">Mot de passe :</label>
        <input type="password" id="mdp" name="mdp" required>
    </div>

    <div>
        <label>
            <input type="checkbox" name="newsletter">
            Je veux recevoir la newsletter
        </label>
    </div>

    <button type="submit">S'inscrire</button>
</form>
        

          Points importants :
          - Chaque champ a un label
- Les champs obligatoires ont required
- Le formulaire a une action et une méthode
- Les champs sont organisés dans des div
- Chaque champ a un name pour le traitement

        

6. Conseils pour débuter

À toujours faire :

- Mettre un label pour chaque champ
- Donner des noms clairs aux champs (attribut name)
- Organiser les champs dans des div
- Indiquer les champs obligatoires
- Tester le formulaire avant de le mettre en ligne

Pièges à éviter :

- Oublier de fermer les balises
- Utiliser le même id plusieurs fois
- Oublier l'attribut name
- Oublier de lier les labels aux inputs
- Mettre trop de champs obligatoires